<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="order-list">
        <message-item v-for="(item, index) in message_list" :key="index" :desc="item.description"
        :name="item.type == 'course' ? '课程购买' :'充值'" :id="item.id" :thumb="item.type == 'course' ? buyIcon : rechargeIcon" :time="item.created_at" :state="item.status">
        </message-item>
      </div>
    </van-pull-refresh>
    <back :scroll="false"></back>
  </div>
</template>

<script>
import messageItem from '../../components/base/message-item.vue'
import back from '../../components/base/back.vue'
export default {
  name: 'message',
  comments: 'message',
  components: {
    'message-item': messageItem,
    back
  },
  data () {
    return {
      isLoading: false,
      message_list: [],
      buyIcon: './static/images/订单1.png',
      rechargeIcon: './static/images/充值1.png'
    }
  },
  created () {
    document.title = '我的消息'
    this.getOrders()
  },
  methods: {
    // 上拉加载更多
    onRefresh () {
      this.$axios.get('/users/' + JSON.parse(localStorage.getItem('user')).id + '/messages').then(response => {
        this.message_list = response.data
        this.$toast('刷新成功')
        this.isLoading = false
      }).catch(error => {
        this.isLoading = false
        console.log(error)
      })
    },
    // 获取消息
    getOrders () {
      this.$axios.get('/users/' + JSON.parse(localStorage.getItem('user')).id + '/messages').then(response => {
        this.message_list = response.data
      })
    }
  }
}
</script>
<style lang="postcss" scoped>
.order-search{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 40px;
    height: 40px;
    z-index: 999;
    border-radius: 50%;
    background-color: #c9a0ce;
    color: white;
    display: flex;
    justify-content: center;
}
.order-search-icon{
    align-self: center;
}
.order-list{
    margin: 5px;
}
.order-list div:first-child{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.order-list div:last-child{
    border-bottom: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
</style>
